<html>
  <head>
    <script language="javascript" type="text/javascript" src="/functions.js"></script>
    <script language="javascript">

      function send_command(cmd) {
        document.getElementById('hints').firstChild.nodeValue = "Send command: " + cmd;
        AJAX_get('/?action=command&command='+ cmd)
      }

      function AJAX_response(text) {
        document.getElementById('hints').firstChild.nodeValue = "Got response: " + text;
      }

      function KeyDown(ev) {
        ev = ev || window.event;
        pressed = ev.which || ev.keyCode;

        switch (pressed) {
          case 37:
              send_command('pan_plus');
            break;
          case 39:
              send_command('pan_minus');
            break;
          case 38:
              send_command('tilt_minus');
            break;
          case 40:
              send_command('tilt_plus');
            break;
          case 32:
              send_command('reset_pan_tilt');
          break;
          default:
              break;
        }
      }

      document.onkeydown = KeyDown;

    </script>
  </head>
  <body>

    <form name="command_panel" action="" onsubmit="return false;" style="background-color: navy; position: absolute; top: 30px; width: 350px; height: 350px; padding: 10px">
      <input type="button" value="reset" onclick="send_command('reset')">
      <br />
      <input type="button" value="reset_pan_tilt" onclick="send_command('reset_pan_tilt')">
      <br />
      <input type="button" value="saturation +" onclick="send_command('saturation_plus')">
      <input type="button" value="saturation -" onclick="send_command('saturation_minus')">
      <br />
      <input type="button" value="contrast +" onclick="send_command('contrast_plus')">
      <input type="button" value="contrast -" onclick="send_command('contrast_minus')">
      <br />
      <input type="button" value="brightness +" onclick="send_command('brightness_plus')">
      <input type="button" value="brightness -" onclick="send_command('brightness_minus')">
      <br />
      <input type="button" value="gain +" onclick="send_command('gain_plus')">
      <input type="button" value="gain -" onclick="send_command('gain_minus')">
      <br />
      <input type="button" value="pan +" onclick="send_command('pan_plus')">
      <input type="button" value="pan -" onclick="send_command('pan_minus')">
      <br />
      <input type="input" value="0" name="pan">
      <input type="button" value="set pan" onclick="send_command('pan_set&value='+this.form.pan.value)">
      <br />
      <input type="button" value="tilt +" onclick="send_command('tilt_plus')">
      <input type="button" value="tilt -" onclick="send_command('tilt_minus')">
      <br />
      <input type="input" value="0" name="tilt">
      <input type="button" value="set tilt" onclick="send_command('tilt_set&value='+this.form.tilt.value)">
      <br />
      <input type="button" value="focus +" onclick="send_command('focus_plus')">
      <input type="button" value="focus -" onclick="send_command('focus_minus')">
      <br />
      <input type="input" value="0" name="focus">
      <input type="button" value="set focus" onclick="send_command('focus_set&value='+this.form.focus.value)">
      <br />
      <input type="button" value="LED on" onclick="send_command('led_on')">
      <input type="button" value="LED off" onclick="send_command('led_off')">
      <input type="button" value="LED auto" onclick="send_command('led_auto')">
      <input type="button" value="LED blink" onclick="send_command('led_blink')">
    </form>

    <div id="hints" style="background-color: yellow; position: absolute; top: 2px">communication hints</div>

  </body>
</html>
